<template>
  <div ref="pageComBox" class="app-container page_wrapper">
    <div ref="otherBox">
      <QueryForm
        v-model="form"
        ref="queryForm"
        :productChannelList="productChannelList"
        @search="getProductList"
      />
    </div>
    <!-- <ProductListTable :list="productList" :productChannelList="productChannelList" ref="channelTable"/> -->
    <el-table
      ref="multipleTable"
      :data="productList"
      border
      style="width: 100%"
      :max-height="tableHeight"
      :key="tableHeight"
      v-tabscroll="$getTableHeight"
    >
      <el-table-column prop="id" label="ID" width="80px" />
      <el-table-column prop="name" label="产品名称" />
      <el-table-column prop="channelName" label="渠道" />
      <el-table-column prop="condition" label="条件" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createDate" label="创建日期" />
      <el-table-column prop="updateBy" label="修改人" />
      <el-table-column prop="updateDate" label="修改日期" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" size="mini" type="primary" plain
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <BasePagination
      v-model="page.page"
      :total="totalCount"
      @change="pageOnChange"
    />

    <el-dialog
      :title="dialog.type === 1 ? '新增产品' : '编辑产品'"
      width="480px"
      :visible.sync="dialog.visible"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="dialog" :rules="rules" label-width="90px">
        <el-form-item label="产品名称:" prop="content.name">
          <el-input v-model="dialog.content.name"></el-input>
        </el-form-item>
        <el-form-item label="渠道名称:" prop="content.channelId">
          <el-select
            style="width: 100%"
            v-model="dialog.content.channelId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in productChannelList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="条件:">
          <el-input v-model="dialog.content.condition" type="textarea">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="d-flex justify-center">
        <el-button type="primary" @click="handleConfirm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getProductList, getAllProductChannelList } from "@/api/product/index";
import { updateProduct, addProduct } from "@/api/product";
import QueryForm from "./_components/QueryForm.vue";
import ProductListTable from "./_components/ProductListTable.vue";
export default {
  name: "ProductList",
  components: { QueryForm, ProductListTable },
  data() {
    return {
      form: {
        name: "",
        channelId: "",
        startDate: "",
        endDate: "",
      },
      productList: [],
      productChannelList: [],
      totalCount: 0,
      page: {
        page: 1,
        size: 100,
      },
      dialog: {
        visible: false,
        type: 1,
        content: {
          id: "",
          name: "",
          channelId: "",
          condition: "",
        },
      },
      rules: {
        "content.name": [
          {
            required: true,
            message: "产品名称不能为空",
            trigger: "blur",
          },
        ],
        "content.channelId": [
          {
            required: true,
            message: "渠道不能为空",
            trigger: "change",
          },
        ],
      },
      tableHeight: 0,
    };
  },
  watch: {
    "dialog.visible": {
      handler(val) {
        if (val) return;
        this.dialog = {
          visible: false,
          type: 1,
          content: {
            id: "",
            name: "",
            channelId: "",
            condition: "",
          },
        };
      },
    },
  },
  created() {
    this.getProductList();
    this.getAllProductChannelList();
  },
  mounted() {
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    async getProductList() {
      this.showAppLoading();
      const params = {
        paramObject: this.form,
        ...this.page,
      };
      const res = await getProductList(params);
      this.hideAppLoading();
      if (!res.result) return;
      const { data } = res;
      this.productList = data.dataList;
      this.totalCount = data.totalCount;
      this.page.page = data.page;
    },
    async getAllProductChannelList() {
      const res = await getAllProductChannelList();
      const { data } = res;
      if (!res.result || !data) return;
      this.productChannelList = data.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    },
    openAddProduct() {
      this.dialog.visible = true;
    },

    pageOnChange(row) {
      this.page.page = row.page;
      if (row.pageSize) {
        this.page.size = row.pageSize;
      }
      this.getProductList();
    },

    edit(row) {
      const content = {};
      Object.keys(this.dialog.content).forEach((key) => {
        content[key] = row[key];
      });
      this.dialog = {
        visible: true,
        type: 2,
        content,
      };
    },
    async handleConfirm() {
      const valid = await this.$refs["form"].validate();
      if (!valid) return;
      const { type } = this.dialog;
      type === 1 ? this.addProduct() : this.updateProduct();
    },
    async updateProduct() {
      const res = await updateProduct(this.dialog.content);
      if (!res.result) return;
      this.dialog.visible = false;
      this.getProductList();
      this.$message.success("编辑产品成功!");
    },
    async addProduct() {
      const res = await addProduct(this.dialog.content);
      if (!res.result) return;
      this.dialog.visible = false;
      this.page.page = 1;
      this.getProductList();
      this.$message.success("添加产品成功!");
    },
  },
};
</script>
